<template>
  <div class="shiList">
    <div id="topAside">
      <el-button type="goon" round size="medium"> 生态保护红线 </el-button>
      <el-button type="goon" round size="medium"> 环境质量底线 </el-button>
      <el-button type="goon" round size="medium"> 资源利用上线 </el-button>
      <el-button type="goon" round size="medium"> 环境管控单元 </el-button>
    </div>
    <div class="shiTable">
      <div   class="demo-input-suffix">

        <div class="searchBar">
          <!--            <el-button type="primary" @click="hqSelect" size="mini">导入数据</el-button>-->
          <el-button type="goon" round size="medium" @click="hqSelect"> 导入源数据 </el-button>

          <span class="margin_left">环境要素管控分区编码</span>
          <el-input size="medium" width="100" >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-button type="goon" round
                     size="medium"  icon="el-icon-search" style="margin-left: 10px">
            查找
          </el-button>
          <el-button type="goon" round
                     size="medium"  icon="el-icon-refresh" >
            重置
          </el-button>
        </div>

      </div>
      <div   class="vectortable">
        <el-table
          :data="VectorData"
          border
          mini
          style="width: 100%"
          height="100%"
        >
          <el-table-column
            fixed
            prop="id"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="HJGKDYBM"
            label="环境管控单元编码"
            width="170">
          </el-table-column>
          <el-table-column
            prop="HJGKDYMC"
            label="环境管控单元名称"
            width="270">
          </el-table-column>
          <el-table-column
            prop="District"
            label="区域"
            width="190">
          </el-table-column>
          <el-table-column
            prop="GKDYFL"
            label="管控单元分类"
            width="110">
          </el-table-column>
          <el-table-column
            prop="REMARKS"
            label="备注"
            width="200">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <!--              <template slot-scope="scope">-->
            <!--                <el-button @click="handleClick(scope.row)" type="primary" size="mini"><i class="el-icon-info"></i></el-button>-->
            <!--                <el-button-->
            <!--                  size="mini"-->
            <!--                  @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>-->
            <!--                <el-button-->
            <!--                  size="mini"-->
            <!--                  type="danger"-->
            <!--                  @click="handleDelete(scope.$index, scope.row)"><i class="el-icon-delete"></i></el-button>-->
            <!--              </template>-->
          </el-table-column>
        </el-table>
      </div>
      <el-dialog
        title="导入本地文件"
        :visible.sync="dialogVisible"
        width="25%"
        center
        :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="导入数据类型">
            <el-select size="medium" v-model="form.region" placeholder="请选择数据类型" style="width:80%" >
              <el-option  v-for="item in form.list" :label="item.typeName" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!--            <el-form-item label="选择目录文件">-->
          <!--&lt;!&ndash;              <span class="demonstration">选择目录文件</span>&ndash;&gt;-->
          <!--              <el-cascader-->
          <!--                v-model="catalogName"-->
          <!--                :options="catalogOptions"-->
          <!--                size="mini"-->
          <!--                @change="handleChange">-->
          <!--                <template slot-scope="{ node, data }">-->
          <!--                  <span :key="data.parent.id" :label="data.parent.id" >{{ data.parent.catalogName }}</span>-->
          <!--&lt;!&ndash;                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>&ndash;&gt;-->
          <!--                </template>-->
          <!--              </el-cascader>-->
          <!--            </el-form-item>-->
          <el-form-item label="上传文件">
            <el-upload
              class="upload-demo"
              action="#"
              :http-request="httpRequest"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :before-upload="beforeUpload"
              :on-success="handleAvatarSuccess"
              :multiple="false"
              :limit="10"
              :on-change="getFile"
              :on-exceed="handleExceed"
              :file-list="fileList"
              :auto-upload="false"
              accept='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'>
              <el-button size="medium" type="goon" round>选择文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
         <el-button size="medium" type="goon" round @click="dialogVisible = false">取 消</el-button>
         <el-button size="medium" type="goon" round @click="tijiao">确 定</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const {mapGetters} = createNamespacedHelpers('dirmanage')

export default {
  name: 'wenList',
  data() {
    return {
      catalogName:[],
      VectorData:[],
      dialogVisible: false,
      form: {
        region: 1,
        list:[]
      },
      fileList:[],
      formData:null,
      activeIndex: '1',
      activeIndex2: '1'
    };
  },
  created () {
    this.formData = new FormData();
  },
  methods:{
    // setData(data){
    //    console.log(data.parent.catalogName)
    //    this.catalogName.push(data.parent.catalogName)
    // },
    handleChange(node,data){
      console.log(node,data)
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    async  hqSelect(){
      this.dialogVisible=true;
      const { data: res } = await this.$http.get('/api/v1.0/achievements/type/findAll')
      this.form.list=res.data;
      console.log(this.form.list)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);

    },
    getFile(file){
      console.log(file)
      this.formData.append("multipartFile",file.raw);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeUpload(file,fileList){
      console.log(file)
      // this.formData.append("achievements",file)
      // this.formData.append("catalogId",1)
      // this.formData.append("typeId",1)
      /*this.formData.forEach((value, key) => {
        console.log(`key ${key}: value ${value}`);
      })*/
      /*this.$http.post('/api/v1.0/achievements/save',formData).then(resulut1 =>{
        console.log(resulut1)
      })*/
    },
    httpRequest(file){
      console.log(file)
      /*var formData = new FormData();
      formData.append("achievements",file.file)
      formData.append("catalogId",1)
      formData.append("typeId",1)*/
      /*formData.forEach((value, key) => {
        console.log(`key ${key}: value ${value}`);
      })*/
    },

    handleAvatarSuccess(res, file) {
      console.log(res)
      console.log("2112")
      console.log(file)
    },
    tijiao(){
      this.dialogVisible = false;
      // this.$http.post('/api/v1.0/achievements/save',this.formData).then(resulut1 =>{
      //   console.log(resulut1)
      // })
      console.log(this.formData)
      this.$store.dispatch('dirmanage/uploadTextTable',this.formData)
    }
  },
  // computed:{
  //    ...mapGetters(['catalogOptions'])
  // },
  //  mounted() {
  //    this.$store.dispatch('dirmanage/getCatlog')
  //  }
}
</script>

<style scoped lang="scss">
.vectortable{
  position: absolute;
  top:80px;
  /*padding:10px;*/
  width: 98%;
  padding: 1%;
}
.shiList{
  position: absolute;
  left: 15.5%;
  //height: 87%;
  top: 9.5%;
  bottom: 1.5%;
  width: 83.5%;
  /*background-color: #ffffff;*/
  border-radius: 8px;
  /*border: 1px red solid;*/
}
#topAside{
  position: absolute;
  width: 100%;
  //height:56px;
  top: 1%;
  text-align: center;
  /*background-color: #545c64;*/
  border-radius: 8px 0;
}
::v-deep ul{list-style:none;display:inline-block;}
::v-deep .el-menu-item{
  font-size: 16px;
  padding:0 40px
}
::v-deep .el-menu--horizontal>.el-menu-item{
  height: 56px;
}
.shiTable{
  position: absolute;
  top: 6%;
  background-color: #ffffff;
  width: 100%;
  height: 94%;
  //padding: 1%;
  border-radius: 8px;
  box-shadow: 0 0 5px #acc4fe;
}
/*.demo-input-suffix{*/
/*  !*height: 60px;*!*/
/*  padding: 10px;*/
/*}*/
.searchBar{
  display: inline-block;
  position: absolute;
  width: 98%;
  /*padding: 10px;*/
  background-color: #ffffff;
  padding: 1%;
}
.el-input{
  width: 12%!important;
}
.searchBar > span{
  /*padding: 10px;*/
  font-size: 14px;
}
.margin_left{
  margin-left: 55%;
  margin-right: 20px;
}
span{
  color: #203f6e;
  font-size: 14px;
}

::v-deep .el-button--goon:focus, .el-button--goon:hover {
  color: #fff;
  border-color: #25e4a3;
  background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
}
::v-deep .el-button--goon:active {
  color: #fff;
  border-color: #25e4a3;
  outline: 0;
}

#topAside {
  ::v-deep .el-button{
    width: 15%;
    font-size: 14px;
    //color: #a5b1ad;
    box-shadow: 0 0 2px #acc4fe;
  }
  ::v-deep .el-button:focus, .el-button:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
}

::v-deep .el-input__inner{
  border-radius: 45px;
}

::v-deep .el-dialog__title{
  font-weight: bold;
  font-size: 20px;
  color: #45524f;
}
.el-dialog__body{
  .el-form{
    .el-form-item {
      .el-form-item__content{
        .el-input{
          ::v-deep  .el-input__inner{
            border-radius: 45px;
          }
        }

      }
    }
  }
}
::v-deep .el-select .el-input__inner{
  border-radius: 45px;
}
::v-deep .el-dialog__headerbtn .el-dialog__close{
  display: none;
}
::v-deep .el-form-item__content{
  ::v-deep  .el-input__inner{
    border-radius: 45px;
  }
}
::v-deep .el-dialog__header {
  background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);

  border-radius: 8px 8px 0 0 ;
}
::v-deep .el-dialog{
  border-radius: 8px;
}

</style>
